<template>
  <el-container>
    <el-main>
      <el-row style="margin-top: 20px;">
          <div class="introduct">
              上传快递单号
          </div>
      </el-row>

      <el-row style="margin-top: 20px; text-align: center">
        <el-col :span="24">
          <el-upload
              class="avatar-uploader"
              :action="'/v01/user/kk_batch/upload'"
              :show-file-list="false"
              :on-success="uploadFile"
              :on-fail="uploadFileFail"
              :before-upload="beforeFileUpload">
              <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>

      <el-row style="margin-bottom: 50px;">
          <div class="block batch-table">
              <el-table
                  :data="tableData"
                  :row-key="row => row.index"
                  style="width: 100%">
                  <el-table-column type="expand">
                      <template slot-scope="props">
                          <el-form label-position="left" inline class="demo-table-expand">
                              <el-form-item label="快递公司代号">
                                  <span>{{ props.row.kkType }}</span>
                              </el-form-item>
                              <el-form-item label="快递公司">
                                  <span>{{ props.row.kkDesc }}</span>
                              </el-form-item>
                              <el-form-item label="快递单号">
                                  <span>{{ props.row.kkId }}</span>
                              </el-form-item>
                          </el-form>
                      </template>
                  </el-table-column>
                  <el-table-column
                      label="快递公司代号"
                      prop="kkType">
                  </el-table-column>
                  <el-table-column
                      label="快递公司"
                      prop="kkDesc">
                  </el-table-column>
                  <el-table-column
                      label="快递单号"
                      prop="kkId">
                  </el-table-column>

              </el-table>
          </div>
      </el-row>
      <el-button type="primary" @click="kkBatchConfirmClick()">提交快递单号</el-button>
    </el-main>
  </el-container>
</template>

<script>
    import {kkBatchConfirm} from '@/api/admin'
    import headTop from '@/components/headTop'

    export default {
      data () {
        return {
          tableData: [],
    
          kkBatchDto: {
            'id': 1,
            'status': 'ENABLE',
            'kkType': 'shengtong-quanzhou',
            'kkDesc': '申通-泉州'
          },
          kkBatchConfirmDto: {
            'id': 1,
            'status': 'ENABLE'
          }
        }
      },
      components: {
        headTop
      },
      mounted () {
        // this.initData();
      },
      methods: {
        async initData () {

        },
        uploadFile (res, file) {
          if (res.code === 200) {
            this.showConfirmList(res)
          } else {
            this.$message.error('上传文件失败！')
          }
        },
        uploadFileFail (res, file) {
          if (res.code === 200) {
            this.showConfirmList(res)
          } else if (res.code === 401) {
            location.href = '/#/login'
          }
        },
        showConfirmList (returnData) {
          this.tableData = returnData.data.detailDtos
          //               this.tableData = returnData.data.kkIDs
          this.kkBatchDto.kkType = returnData.data.kkBatchDto.kkType
          this.kkBatchDto.kkDesc = returnData.data.kkBatchDto.kkDesc
          this.total = returnData.page.total
          this.currentPage = returnData.page.pageIndex
          this.kkBatchConfirmDto.id = returnData.data.kkBatchDto.id
        },
        beforeFileUpload (file) {

        },

        async kkBatchConfirmClick (kkBatchConfirmDto) {
          let result = await kkBatchConfirm(this.kkBatchConfirmDto)
          if (result.status === 200 && result.data.code === 200) {
            this.$message({
              type: 'success',
              message: '提交快递单文件成功'
            })
          } else {
    
          }
        }
      }
    }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';
    .label-title{
        font-weight: bold;
        font-size: 24px;
        color: #ff633b;
        margin: 30px;
    }
    .introduct{
        width: 900px;
        text-align: center;
        margin: auto;
    }
    // .el-button {
    //   width: 200px;
    //   margin: auto;
    //   display: block;
    // }
    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .batch-dialog{
    }
    .batch-table{
        max-height: 400px;
        overflow: auto;
    }
</style>
